<!--public：放静态文件的地方，html，静态图标等
src：项目源码目录
<src.assets：logo，图片，自定义样式
src.components：vue组件
src.router：定义路由，每个路由对用一个页面
src.views：视图文件
App.vue：所有页面的入口
main.js：所有配置的入口，可以导入项目所需要的包，然后组合在一起
vue.config.js：vue项目中的一些配置，可以配置端口号，跨域等-->
<template>
  <div id="app">
    <el-container>
      <el-header style="background-color: #4c535a; display: flex; align-items: center;">
        <img src="@/assets/SmartHome.png" alt="" style="width: 60px">
        <span style="font-size: 20px; margin-left: 15px; color: white;" >智能家居环境检测与远程控制系统</span>
        <el-dropdown style="margin-left: auto; height: 60px; line-height: 60px">
          <span class="el-dropdown-link" style="color: white; font-size: 16px;">用户：{{user.userName}}<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <div @click="logout()">退出登录</div>
            </el-dropdown-item>
          </el-dropdown-menu>
      </el-dropdown>
      </el-header>
      <el-container style="min-height: 100vh;">
        <el-aside style="background-color:#545c64;overflow-y: auto;height: available;width: 250px; ">
          <el-menu default-active="$route.path" router class="el-menu-vertical-demo" @open="handleOpen"
                   @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

            <!--传感器界面-->
            <el-submenu index='1' v-if="user.identity !== '孩子'">
              <template slot="title">
                <i class="el-icon-message-solid"></i>
                <span>传感器信息</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index='/A_P_AirQualitySensor'>空气质量传感器</el-menu-item>
                <el-menu-item index='/A_P_CoSensor'>一氧化碳传感器</el-menu-item>
                <el-menu-item index='/A_P_FlameSensor'>火焰传感器</el-menu-item>
<!--                <el-menu-item index='/A_P_InfraredSensor'>人体红外传感器</el-menu-item>-->
                <el-menu-item index='/A_P_LightSensor'>光敏传感器</el-menu-item>
                <el-menu-item index='/A_P_TemperatureHumiditySensor'>温湿度传感器</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <!-- 智能设备界面-->
            <el-menu-item index='/Common_Devices'>
              <i class="el-icon-s-tools"></i>
              <span slot="title">智能设备</span>
            </el-menu-item>

            <!--客厅界面-->
            <el-menu-item index='/Common_LivingRoom'>
              <i class="el-icon-hot-water"></i>
              <span slot="title">客厅</span>
            </el-menu-item>

            <!--厨房-->
            <el-menu-item index='/Common_kitchen'>
              <i class="el-icon-fork-spoon"></i>
              <span slot="title">厨房</span>
            </el-menu-item>

            <!--阳台界面-->
            <el-menu-item index='/Common_Balcony'>
              <i class="el-icon-sunny"></i>
              <span slot="title">阳台</span>
            </el-menu-item>

            <!--卧室界面-->
            <el-menu-item index='/Common_Bedroom'>
              <i class="el-icon-s-platform"></i>
              <span slot="title">卧室</span>
            </el-menu-item>

            <!--成员管理界面-->
            <el-menu-item index='/A_UsersManagement' v-if="user.identity !== '孩子' ">
              <i class="el-icon-user-solid"></i>
              <span slot="title">成员管理</span>
            </el-menu-item>


            <!--日志管理界面-->
            <el-menu-item index='/A_Log' v-if="user.identity === 'admin' ">
              <i class="el-icon-s-management"></i>
              <span slot="title">日志管理</span>
            </el-menu-item>

            <!--统计图测试界面-->
            <el-menu-item index='/echartsTest' v-if="user.identity === 'admin' ">
              <i class="el-icon-s-management"></i>
              <span slot="title">数据统计</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main>
          <router-view/>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {

  data() {
   return {
     //将登录用户信息取出
     user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
   }
  },
  methods: {
    logout(){
      localStorage.removeItem("user");
      this.$router.push("/login")
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
// 修改侧边栏右边小瑕疵
</script>

<style>
.el-menu {
  border-right: none !important;
}
</style>
